<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="/static/js/jquery.min.js?v=2.1.4"></script>
    <script src="/static/js/plugins/zTree/js/jquery.ztree.all.js"></script>
    <link href="/static/js/plugins/zTree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css">
    <script type="text/javascript">


        //ztree 的一些配置
        var setting = {
            data: {
                simpleData: {enable: true}
            },
            check: {
                enable: true,
                chkStyle: "checkbox",
                radioType: "all"
            },
            view: {
                showLine: true
            },
            callback: {
                onClick: onClick,
                onCheck: onCheck,
            }
        }


        //要被渲染的数据
        var zNodes =[

            {id:0,pId: 0,name:"系统菜单"},
        {id:1, pId:0, name:"主页"},
        {id:2, pId:0, name:"系统设置"},
        {id:14, pId:2, name:"用户管理"},
        {id:16, pId:2, name:"权限管理"},
        {id:17, pId:2, name:"角色管理"},
        {id:19, pId:2, name:"用户绑定角色"},

        ];

        $(document).ready(function() {
            //初始化ztree
            $.fn.zTree.init($("#treeConfig"), setting, zNodes);

            var treeObj = $.fn.zTree.getZTreeObj("treeConfig");

            var node = treeObj.getNodeByParam("id",0);
            treeObj.checkNode(node,true,false);
            var node = treeObj.getNodeByParam("id",1);
            treeObj.checkNode(node,true,false);
            var node = treeObj.getNodeByParam("id",2);
            treeObj.checkNode(node,true,false);

            var node = treeObj.getNodeByParam("id",14);
            treeObj.checkNode(node,true,false);
            var node = treeObj.getNodeByParam("id",16);
            treeObj.checkNode(node,true,false);
            var node = treeObj.getNodeByParam("id",17);
            treeObj.checkNode(node,true,false);
            var node = treeObj.getNodeByParam("id",19);
            treeObj.checkNode(node,true,false);

            var nodes = treeObj.getNodes();
            for (var i = 0; i < nodes.length; i++) { //设置所有节点展开
                treeObj.expandNode(nodes[i], true, true, false);
            }

        });

        //ztree 的点击事件 （点击回调）
        function onClick(e,treeId,treeNode) {
            var zTree = $.fn.zTree.getZTreeObj("treeConfig");
            zTree.checkNode(treeNode, !treeNode.checked, null, true);
            return false;
        }

        //选中事件（选中回调）
        function onCheck(e,treeId,treeNode){
            var array = new Array();
            var treeObj=$.fn.zTree.getZTreeObj("treeConfig"),
            nodes=treeObj.getCheckedNodes(true),
            v="";
            for(var i=0;i<nodes.length;i++){
                v+=nodes[i].name + ",";
                array[i] = nodes[i].id;
                console.log("节点id:"+nodes[i].id+"节点名称"+v); //获取选中节点的值
                console.log(array);
            }
        }


    </script>
    <style>


    </style>
</head>
<body>

<div id="treeContainer" class="treeContainer">
    <ul id="treeConfig" class="ztree"></ul>
</div>


</body>
</html>